import { ref } from 'vue';
import axios from 'axios';
// 使用 npm install axios --save 安装 axios
// 请求地址：https://dog.ceo/api/breeds/image/random 请求一个狗的图片
// 返回数据格式：
// {"message":"https://xxxx","status":"success"}
// 返回结果中的 message 是图片的地址，将其赋值给 img 标签的 src 即可

function useURLLoader(url:string) {

    const loading = ref(true);
    const loaded = ref(false);

    const result = ref(null);
    const error = ref(null);

    axios.get(url).then((rawData) => {
        result.value = rawData.data;// .data 是响应回来的数据
        loading.value = false;
        loaded.value = true;
        error.value = null;
    }).catch(e => {
        error.value = e;
        result.value = null;
        loading.value = true;
        loaded.value = false;
    })

    return { loading,loaded,result,error };
}

export default useURLLoader